<template>
  <view class="info-container">
    <!-- 个人信息列表 -->
    <view class="info-list">
      <!-- 头像 -->
      <view class="info-item" @tap="chooseAvatar">
        <text class="item-label">头像</text>
        <view class="item-value-with-image">
          <image
            class="avatar-image"
            :src="userInfo.picture || 'https://cphimg.leyoo888.com/dev/upload/supplier/2025-05-06/1746528989179.png'"
            mode="fill"
          ></image>
          <text class="item-arrow">></text>
        </view>
      </view>

      <!-- 昵称 -->
      <view class="info-item" @tap="editNickname">
        <text class="item-label">昵称</text>
        <view class="item-value-with-text">
          <text class="value-text">{{ userInfo.name || "" }}</text>
          <text class="item-arrow">></text>
        </view>
      </view>

      <!-- 手机号 -->
      <view class="info-item">
        <text class="item-label">手机号</text>
        <view class="item-value-with-text">
          <text class="value-text">{{ userInfo.mobile || "" }}</text>
          <text class="item-arrow">></text>
        </view>
      </view>

      <!-- 性别 -->
      <view class="info-item" @tap="selectGender">
        <text class="item-label">性别</text>
        <view class="item-value-with-text">
          <text class="value-hint">{{
            userInfo.gender ? (userInfo.gender === 1 ? "男" : "女") : "请选择"
          }}</text>
          <text class="item-arrow">></text>
        </view>
      </view>

      <view class="logout-section">
        <button class="logout-btn" @tap="sumitInfo">保存信息</button>
      </view>
    </view>

    <view class="popup-mask" v-if="showNicknamePopup" @tap="closeNicknamePopup">
      <view class="popup-content" @tap.stop>
        <view class="popup-header">
          <text>修改昵称</text>
          <text class="close-icon" @tap="closeNicknamePopup">×</text>
        </view>
        <view class="popup-body">
          <input
            type="text"
            v-model="tempNickname"
            placeholder="请输入昵称"
            class="nickname-input"
            maxlength="20"
          />
        </view>
        <view class="popup-footer">
          <button class="confirm-btn" @tap="confirmNickname">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { setUserInfo, getUserInfo } from "@/apiShop/mine.js";
import { onLoad } from "@dcloudio/uni-app";
import { upLoadOss } from "@/api/common";
// 用户信息
const userInfo = ref({
  picture: "", // 头像链接，这里留空以显示默认头像
  name: "",
  mobile: "",
  gender: 0, // 0-未设置, 1-男, 2-女
});

// 选择头像
const chooseAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    sourceType: ["album", "camera"],
    success: (res) => {
      // 这里可以实现上传逻辑，暂时只显示本地路径
      upLoadOss(res.tempFilePaths[0])
        .then((value) => {
          userInfo.value.picture = value;
          uni.hideLoading();
        })
        .catch((err) => {
          uni.hideLoading();
          showToast(err.message);
        });
    },
  });
};
const showNicknamePopup = ref(false);
const tempNickname = ref("");

// 打开昵称编辑弹窗
const editNickname = () => {
  tempNickname.value = userInfo.value.name;
  showNicknamePopup.value = true;
};

// 确认修改昵称
const confirmNickname = () => {
  if (tempNickname.value.trim()) {
    userInfo.value.name = tempNickname.value.trim();
    closeNicknamePopup();
  } else {
    uni.showToast({
      title: "昵称不能为空",
      icon: "none",
    });
  }
};

// 关闭昵称编辑弹窗
const closeNicknamePopup = () => {
  showNicknamePopup.value = false;
};

// 选择性别
const selectGender = () => {
  uni.showActionSheet({
    itemList: ["男", "女"],
    success: (res) => {
      userInfo.value.gender = res.tapIndex + 1;
    },
  });
};

const sumitInfo = async () => {
  await setUserInfo(userInfo.value);
  uni.navigateBack();
};
onLoad(async () => {
  const res = await getUserInfo();
  userInfo.value = res;
});
</script>

<style lang="scss" scoped>
.info-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.info-list {
  background-color: #ffffff;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .item-label {
    font-size: 30rpx;
    color: #333333;
  }

  .item-value-with-image {
    display: flex;
    align-items: center;

    .avatar-image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: #f3f3f3;
      margin-right: 10rpx;
    }
  }

  .item-value-with-text {
    display: flex;
    align-items: center;

    .value-text {
      font-size: 30rpx;
      color: #333333;
      margin-right: 10rpx;
    }

    .value-hint {
      font-size: 30rpx;
      color: #999999;
      margin-right: 10rpx;
    }
  }

  .item-arrow {
    font-size: 30rpx;
    color: #cccccc;
  }
}
.logout-section {
  margin-top: 40rpx;
  padding: 0 30rpx;

  .logout-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: #3399ff;
    color: #fff;
    font-size: 30rpx;
    border-radius: 0;
    border: none;
  }
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  position: relative;
  padding: 30rpx;
  text-align: center;
  font-size: 32rpx;
  border-bottom: 1px solid #eee;

  .close-icon {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40rpx;
    color: #999;
    padding: 0 20rpx;
  }
}

.popup-body {
  padding: 40rpx 30rpx;

  .nickname-input {
    width: 90%;
    height: 80rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
  }
}

.popup-footer {
  display: flex;
  border-top: 1px solid #eee;

  button {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 30rpx;
    border-radius: 0;
    border: none;

    &::after {
      border: none;
    }
  }

  .confirm-btn {
    background-color: #3399ff;
    color: #fff;
  }
}
</style>
